<template>
    <div class="cmt-container">
        <h3>发表评论</h3>
        <hr>
        <textarea placeholder="请输入评论的内容，最多吐槽180字" maxlength="180" v-model="msg"></textarea>

        <mt-button size="large" type="primary" @click="postComment">发表评论</mt-button>

        <div class="cmt-list">
            <div class="cmt-item"  v-for="(item,i) in comments" :key="item.add_time">
                <div class="cmt-tittle">
                    第{{i+1}}楼 用户：{{item.user_name}}&nbsp;&nbsp;发表时间：{{item.add_time | dateFormat}}
                </div>
                <div class="cmt-body">
                    {{item.content == undefined ? '此用户很懒，什么也没留下':item.content }}
                </div>
            </div>

        </div>

        <mt-button size="large" type="primary" plain @click="getMore()">加载更多</mt-button>
    </div>
</template>

<script>
    import { Toast } from "mint-ui"
    export default {
        //name: "comment",
        data(){
            return{
                pageIndex:1,//默认显示第一页数据
                comments:[ ],
                msg:''
            }
        },
        created(){this.getComments()},
        methods:{
            getComments(){
                this.$http.get('Java/pageindex'+this.pageIndex+".json").then(result =>{
                    if(result.body.status === 0 ){
                        this.comments= this.comments.concat(result.body.message)
                    }
                    else {
                        Toast("获取评论失败！")
                    }
                })
            },
            getMore(){
                this.pageIndex++;
                this.getComments()
            },
            postComment(){
                //提交给服务器的数据对象{content:this.msg}
                if(this.msg.trim().length === 0){
                    return Toast("输入内容为空！")
                }
                this.$http.post('Java/post13.json',{content:this.msg.trim()})
                    .then(function (result) {
                        if (result.body.status === 0 ) {
                            var cmt = {user_name:"匿名用户",add_time:Date.now(),content:this.msg.trim()};
                            this.comments.unshift(cmt);
                            this.msg=''
                        }
                    })
            }
        },
        //props:["id"]
    }
</script>

<style lang="scss" scoped>
  .cmt-container{
      margin-bottom: 80px;
      h3{font-size: 18px};
      textarea{font-size: 14px;height: 85px;margin: 0};
      .cmt-list{
          margin: 10px 0;
          .cmt-item{
              font-size: 13px;
              .cmt-tittle{ background-color: #ccc;line-height: 30px}
              .cmt-body{line-height: 35px;text-indent: 2em}
          }
      }
  }
</style>